<template>
  <div class="workspace">
    <!-- 顶部工具栏 -->
    <div class="toolbar">
      <div class="toolbar-left">
        <h1 class="title">Vue拖拽数据大屏</h1>
      </div>
      <div class="toolbar-center">
        <el-button-group>
          <el-button @click="handleSave" type="primary" :icon="DocumentAdd">
            保存
          </el-button>
          <el-button @click="handlePreview" :icon="View">
            预览
          </el-button>
          <el-button @click="handleClear" :icon="Delete">
            清空
          </el-button>
        </el-button-group>
      </div>
      <div class="toolbar-right">
        <el-slider
          v-model="scale"
          :min="0.1"
          :max="2"
          :step="0.1"
          :format-tooltip="formatTooltip"
          style="width: 120px; margin-right: 20px;"
        />
        <span class="scale-text">{{ Math.round(scale * 100) }}%</span>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧组件面板 -->
      <div class="left-panel">
        <ComponentPanel />
      </div>

      <!-- 中间画布区域 -->
      <div class="canvas-area">
        <Canvas />
      </div>

      <!-- 右侧属性面板 -->
      <div class="right-panel">
        <PropertyPanel />
      </div>
    </div>
  </div>
</template>

<!--
  工作台页面的脚本部分
  使用Vue3的Composition API编写
  管理页面的状态和用户交互逻辑
-->
<script setup lang="ts">
// 导入Vue相关功能
import { ref, computed } from 'vue'              // Vue响应式API
import { useRouter } from 'vue-router'           // 路由功能

// 导入Element Plus组件和图标
import { ElMessage, ElMessageBox } from 'element-plus'  // 消息提示和确认框
import { DocumentAdd, View, Delete } from '@element-plus/icons-vue'  // 图标

// 导入状态管理和组件
import { useCanvasStore } from '@/stores/canvas'  // 画布状态管理
import ComponentPanel from '@/components/ComponentPanel.vue'  // 组件面板
import Canvas from '@/components/Canvas.vue'                  // 画布组件
import PropertyPanel from '@/components/PropertyPanel.vue'    // 属性面板

// 初始化路由和状态管理
const router = useRouter()        // 路由实例，用于页面跳转
const canvasStore = useCanvasStore()  // 画布状态管理实例

/**
 * 缩放比例的计算属性
 * 双向绑定：既可以获取store中的缩放值，也可以设置新的缩放值
 */
const scale = computed({
  get: () => canvasStore.scale,                    // 获取当前缩放比例
  set: (value: number) => canvasStore.setScale(value)  // 设置新的缩放比例
})

/**
 * 格式化缩放提示文本
 * 将小数形式的缩放比例转换为百分比显示
 * @param value 缩放比例（0.1-2.0）
 * @returns 格式化后的百分比字符串
 */
const formatTooltip = (value: number) => {
  return `${Math.round(value * 100)}%`
}

/**
 * 保存项目数据
 * 将当前的组件列表和画布配置保存到浏览器本地存储
 */
const handleSave = () => {
  // 准备要保存的数据
  const data = {
    components: canvasStore.components,      // 所有组件数据
    canvasConfig: canvasStore.canvasConfig  // 画布配置
  }
  
  // 保存到浏览器本地存储（localStorage）
  // 注意：实际项目中可能需要保存到服务器
  localStorage.setItem('vue-drag-screen-data', JSON.stringify(data))
  
  // 显示保存成功提示
  ElMessage.success('保存成功')
}

/**
 * 预览功能
 * 保存当前数据并跳转到预览页面
 */
const handlePreview = () => {
  handleSave()              // 先保存当前数据
  router.push('/preview')   // 跳转到预览页面
}

/**
 * 清空画布
 * 删除画布上的所有组件，需要用户确认
 */
const handleClear = async () => {
  try {
    // 显示确认对话框，防止误操作
    await ElMessageBox.confirm(
      '确定要清空画布吗？此操作不可恢复。',  // 提示信息
      '警告',                              // 对话框标题
      {
        confirmButtonText: '确定',         // 确认按钮文本
        cancelButtonText: '取消',          // 取消按钮文本
        type: 'warning'                   // 对话框类型（警告）
      }
    )
    
    // 用户确认后，清空画布
    canvasStore.clearCanvas()
    ElMessage.success('清空成功')
  } catch {
    // 用户点击取消或关闭对话框时，不执行任何操作
    // catch块为空，表示静默处理取消操作
  }
}
</script>

<style scoped>
.workspace {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-color);
  color: var(--text-color);
}

.toolbar {
  height: 60px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.toolbar-left .title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.toolbar-right {
  display: flex;
  align-items: center;
}

.scale-text {
  font-size: 14px;
  color: var(--text-secondary);
  min-width: 40px;
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.left-panel {
  width: 280px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
}

.canvas-area {
  flex: 1;
  background: #1e1e1e;
  position: relative;
  overflow: hidden;
}

.right-panel {
  width: 320px;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-color);
  overflow-y: auto;
}
</style>